<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">


</head>
<body>
 	<script type="text/javascript" src="/web/view/prop/ueditor.config.js"></script>
	<script type="text/javascript" src="/web/view/prop/ueditor.all.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/web/view/prop/lang/zh-cn/zh-cn.js"></script>
	
	<script type="text/javascript" src="./webuploader.js" charset="utf-8"></script>
	<link type="text/css" href="./third-party/webuploader/webuploader.css" 	rel="stylesheet" />

    <div class="topjui-fluid">
        <fieldset>
            <legend>宣传信息</legend>
        </fieldset>
        <div class="topjui-row">
            <div class="topjui-col-sm8">
				<label class="topjui-form-label">板块：</label>
				<div class="topjui-input-block">
		             <input type="text" name="proptypeid" id="proptypeid"
		                   data-toggle="topjui-combobox"
		                   data-options="required:true,
		               prompt:'',
		               valueField:'id',
		               textField:'text',
		               method:'get',
                       panelHeight:250,
		               onLoadSuccess:function(data){
		               },
	                   panelHeight:250,
		               url:'/prop/queryProptype'">
				</div>
            </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">标题：</label>
                <div class="topjui-input-block">
				<input id="title" type="text" name="title"
                           style="" class="textbox-f" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填',validType:'maxLength[30]'"  />
                </div>
            </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                <label class="topjui-form-label">简介：</label>
                <div class="topjui-input-block">
				<input id="subtitle" type="text" name="subtitle"
                           style="" class="textbox-f" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填',validType:'maxLength[60]'"  />
                </div>
            </div>
        </div>
        
        <div class="topjui-row">
	        <div class="topjui-col-sm6">
				<div class="topjui-input-block">
					<input type="hidden" name="photo" id="photo">
					<input id="filename" type="text" name="filename"
		                       style="" class="textbox-f" data-toggle="topjui-textbox"
		                       data-options="readonly:true,width:200,prompt:'请选择图片'"  />
		                       
				    <div class="fl record-box record-file-box" id="else">
				        <div class="title title-color3">上传缩略图</div>
				    </div>
				    <div id="fileInfo6" class="note" ></div>
				</div>
	        </div>
	        <div class="topjui-col-sm6" style="padding:1px 1px 1px 1px;width: 150px;height: 100px">
	        <img id="yulan" src="" width="150px" height="100px">
	        </div>
        </div>

        <div class="topjui-row">
            <div class="topjui-col-sm8">
                 <label class="topjui-form-label">内容：</label>
                   <div class="topjui-input-block"> 
                <script id="content"  type="text/plain"></script>
                </div>
            </div>
        </div>
       
			
<!--         <div class="topjui-row"> -->
<!--             <div class="topjui-col-sm10"> -->
<!--                 <label class="topjui-form-label">测试：</label> -->
<!--                 <div class="topjui-input-block"> -->


<!--  				</div> -->
<!--             </div> -->
<!--         </div> -->
        
    </div>
   
<script type="text/javascript">
	    var ue = UE.getEditor('content', {
// 	        autoHeightEnabled: true,
// 	        autoFloatEnabled: true,
	        initialFrameWidth: 690,
	        initialFrameHeight:483
	    });
	    
var stateElse = "pending";
var uploaderElse;
var listElse =[];

$(document).ready(function(){
	uploaderElse = WebUploader.create({
		swf : "./third-party/webuploader/Uploader.swf",
		server : "/test/uploadtest",
		auto : true,
		pick : {
			id:"#else",
			multiple :false
		},fileNumLimit: 1,
		accept :{
			extensions: 'gif,jpg,jpeg,bmp,png'
		},
		resize : false
	});
	uploaderElse.on("fileQueued",function(file){
		$("#fileInfo6").append('<div id="'+file.id+'" ><div style="background:url(./third-party/webuploader/upload-file.jpg);height:20px;width:23px;float:left;margin-left:40px;"></div>'+file.name+'<a href="javascript:removeListElse('+file.id+')" style="padding-left:10px;">删除</a></div>');
		$("#filename").textbox('setValue', file.name);
	});

	uploaderElse.on("uploadAccept",function(object,ret ){
		for(var i=0;i<ret.length;i++){
		listElse.push({"url":ret[i].url,"filename":ret[i].filename});
		}
	});
	uploaderElse.on("uploadProgress",function(file,percentage){
		var fileId = $("#"+file.id),
		percent = fileId.find(".progress .progress-bar");
		if(!percent.length){//避免重复创建
			percent = $('<div class="progress progress-striped active"><div class="progress-bar" role="progressbar" style="width: 0%"></div></div>')
			.appendTo(fileId).find('.progress-bar');
		}
		fileId.find('p.state').text('上传中');
		percent.css( 'width', percentage * 100 + '%' );
	});
	uploaderElse.on( 'uploadSuccess', function( file ) {
		debugger;
		//alert(listElse[0].url);
		$('#photo').val(listElse[0].url);
		document.getElementById("yulan").src=listElse[0].url;
		//$("#yulan").attr("src","http://localhost:8080"+listElse[0].url);
		$( '#'+file.id ).find('p.state').text('已上传');
	});

	uploaderElse.on( 'uploadError', function( file ) {
		$( '#'+file.id ).find('p.state').text('上传出错');
		alert("网络异常，上传图片失败！");
	});

	uploaderElse.on( 'uploadComplete', function( file) {
		$( '#'+file.id ).find('.progress').fadeOut();

	});
	uploaderElse.on( 'all', function( type ) {
		if ( type === 'startUpload' ) {
			stateElse = 'uploading';
		} else if ( type === 'stopUpload' ) {
			stateElse = 'paused';
		} else if ( type === 'uploadFinished' ) {

			stateElse = 'done';
		}
		if ( stateElse === 'uploading' ) {
			$("#start").text('提交......');
		} else {
			$("#start").text('提交');
		}
	});
	uploaderElse.on( "uploadError", function( obj, reason  ) {
		var errorMessage = obj.message;
		alert(errorMessage,3); 
	});
});

/*移除上传列表*/
function removeListElse(obj,fname){
	var filename;
	if(uploaderElse.getFile(obj.id)){
		filename = uploaderElse.getFile(obj.id).name;
		uploaderElse.removeFile(uploaderElse.getFile(obj.id));
	}else{
		filename = 	fname;
	}
	listElse.removeElseListFile(listElse,filename);
	$(obj).remove();
}

Array.prototype.removeElseListFile = function(_arr,_obj){
	var len = _arr.length;
	for(var i = 0; i < len; i++)
	{
		if(_arr[i].filename == _obj)
		{
			this.splice(i, 1);
			return parseInt(i);
		}
	}
	return -1;
};
	    
</script>
</body>
</html>